<!--
 * @Description: 创建学生批次弹窗
 * @Author: liyujie
 * @Date: 2021/03/16
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/03/16
-->
<template>
    <section class="wrapper">
        <el-dialog
            :title="type === 'add' ? '新建批次' : type === 'edit' ? '编辑批次' : '查看批次'"
            width="680px"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <el-form
                class="base-info contract"
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-position="right"
                label-width="124px"
            >
                <el-form-item
                    label="视频批次"
                    prop="series_index"
                >
                    <el-input
                        v-model="ruleForm.series_index"
                        placeholder="请输入视频批次"
                        size="medium"
                        clearable
                        style="width: 360px"
                        :disabled="type !== 'add'"
                    />
                </el-form-item>
                <el-form-item
                    label="公司名称"
                    prop="hire_no"
                    v-if="type === 'add'"
                >
                    <el-select
                        v-model="ruleForm.hire_no"
                        filterable
                        remote
                        clearable
                        size="medium"
                        style="width: 360px;"
                        reserve-keyword
                        placeholder="请输入公司名称"
                        :remote-method="remoteMethod"
                        :loading="filterLoading"
                        :disabled="type !== 'add'"
                    >
                        <el-option
                            v-for="item in suggestList"
                            :key="item.hire_no"
                            :label="item.company_name"
                            :value="item.hire_no"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="公司名称"
                    prop="series_index"
                    v-if="type !== 'add'"
                >
                    <el-input
                        v-model="ruleForm.company_name"
                        size="medium"
                        clearable
                        style="width: 360px"
                        disabled
                    />
                </el-form-item>
                <el-form-item
                    label="产品名称"
                    prop="series_title"
                >
                    <el-input
                        v-model="ruleForm.series_title"
                        placeholder="请输入产品名称"
                        size="medium"
                        clearable
                        style="width: 360px"
                        :disabled="type === 'detail'"
                    />
                </el-form-item>
                <el-form-item
                    label="视频数量"
                    prop="count"
                >
                    <el-input
                        v-model="ruleForm.count"
                        placeholder="请输入视频数量"
                        size="medium"
                        clearable
                        style="width: 360px"
                        :disabled="type === 'detail'"
                    />
                </el-form-item>
                <el-form-item
                    label="寝室性别"
                >
                    <el-select
                        v-model="ruleForm.sex"
                        filterable
                        placeholder="不限"
                        size="medium"
                        style="width: 360px"
                        :disabled="type === 'detail'"
                    >
                        <el-option
                            label="不限"
                            :value="0"
                        />
                        <el-option
                            label="男"
                            :value="1"
                        />
                        <el-option
                            label="女"
                            :value="2"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button
                    size="medium"
                    style="width: 120px;margin-right: 32px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    style="width: 120px"
                    :loading="loading"
                    v-if="type !== 'detail'"
                    @click="handleSubmit"
                >
                    确认
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    style="width: 120px"
                    v-if="type === 'detail'"
                    @click="type = 'edit'"
                >
                    修改
                </el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import { deepClone } from "@/assets/js/utils";

export default {
    name: "StudentSeriesDialog",
    data() {
        return {
            type: 'add',
            dialogVisible: false,
            loading: false,
            filterLoading: false,
            ruleForm: {
                type: 2,
                series_no: '',
                // 公司
                hire_no: '',
                // 批次
                series_index: '',
                // 产品名称
                series_title: '',
                // 推广数量
                count: '',
                // 性别
                sex: 0,
            },
            rules: {
                hire_no: [
                    {required: true, message: '请选择公司', trigger: 'change'}
                ],
                series_title: [
                    {required: true, message: '请填写产品名称', trigger: 'blur'}
                ],
                series_index: [
                    {required: true, message: '请填写推广批次', trigger: 'blur'},
                    {pattern: /^\d{1,}$/, message: '推广批次必须为数字', trigger: 'blur'}
                ],
                count: [
                    {required: true, message: '请填写视频数量', trigger: 'blur'},
                    {pattern: /^\d{1,}$/, message: '视频数量必须为数字', trigger: 'blur'}
                ],
            },
            // 公司列表
            suggestList: [],
        };
    },
    mounted() {
        this.getSuggest();
    },
    methods: {
        /**
         * 显示弹窗
         * @param type - edit编辑 add新增
         * @param data
         */
        show(type = 'add', data) {
            if(type !== 'add') {
                this.ruleForm.series_no = data.series_no;
                this.ruleForm.hire_no = data.hire_no;
                this.ruleForm.company_name = data.company_name;
                this.ruleForm.series_index = data.series_index;
                this.ruleForm.series_title = data.series_title;
                this.ruleForm.count = data.count;
                this.ruleForm.sex = data.sex;
            }
            this.type = type;
            this.getSuggest();
            this.dialogVisible = true;
        },

        /**
         * 提交
         */
        handleSubmit() {

            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    this.loading = true;
                    let params = deepClone(this.ruleForm);
                    let url = this.type === 'add' ? '/student/room_series%5Cadd' : '/student/room_series%5Cupdate';

                    this.$post(url, params, resp => {
                        if(resp.code === 1) {
                            this.dialogVisible = false;
                            if(this.type === 'add') {
                                this.$notify({
                                    title: '提示',
                                    message: '添加成功',
                                    type: 'success',
                                    duration: 2000
                                });
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });
                            }
                            this.$emit('update');
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },

        /**
         * 弹窗关闭 重置表单
         */
        handleClose() {
            this.ruleForm.series_no = '';
            this.ruleForm.hire_no = '';
            this.ruleForm.series_index = '';
            this.ruleForm.series_title = '';
            this.ruleForm.count = '';
            this.ruleForm.sex = '';
            this.type = 'add';
            this.$refs.ruleForm.clearValidate();
        },

        /**
         * @description 搜索商家名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.filterLoading = true;
                setTimeout(() => {
                    this.filterLoading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 获取商家列表
         */
        getSuggest (keyword) {
            this.$post('/student/room_series%5Cget_company_list', {
                keyword: keyword
            }, resp => {
                if (resp.code === 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .tips {
        color: #999999;
        font-size: 12px;
        margin-left: 12px;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 48px 36px;
        max-height: 600px;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
    }
    .btn {
        text-align: center;
        margin-top: 36px;
    }
}

</style>
